<template>
  <div>
    <vxe-grid
      v-bind="grid"
      ref="xGrid"
      @cell-menu="
        ({ row }) => {
          this.$refs.xGrid.setCurrentRow(row);
        }
      "
      @menu-click="contextMenuClickEvent"
    >
      <template #toolbar_buttons>
        <eip-toolbar
          @del="del"
          @update="update"
          @add="add"
          @copy="copy"
          @onload="toolbarOnload"
        ></eip-toolbar>
        <a-space class="margin-left-sm">
          <a-button
            icon="fullscreen"
            type="link"
            @click="$refs.xGrid.setAllTreeExpand(true)"
            >展开所有</a-button
          >
          <a-button
            icon="fullscreen-exit"
            type="link"
            @click="$refs.xGrid.clearTreeExpand()"
            >关闭所有</a-button
          >
        </a-space>
      </template>
      <template #toolbar_tools> </template>
      <template #loading>
        <a-spin></a-spin>
      </template>
      <template #empty>
        <eip-empty />
      </template>
      <template #radio="{ row, checked }">
        <span @click.stop="$refs.xGrid.toggleCheckboxRow(row)">
          <a-radio :checked="checked"> </a-radio>
        </span>
      </template>
      <template #isFreeze="{ row }">
        <a-switch :checked="row.isFreeze" @change="isFreezeChange(row)" />
      </template>
      <template #color="{ row }">
        <a-button
          size="small"
          :style="{ 'background-color': row.color, color: '#fff' }"
          v-if="row.color"
          >{{ row.color }}</a-button
        >
      </template>
      <template #operate="{ row }">
        <a-tooltip
          @click="tableUpdateRow(row)"
          title="编辑"
          v-if="visible.update"
        >
          <label class="text-eip eip-cursor-pointer">编辑</label>
        </a-tooltip>
        <a-divider type="vertical" v-if="visible.update" />
        <a-tooltip title="删除" v-if="visible.del" @click="tableDelRow(row)">
          <label class="text-red eip-cursor-pointer">删除</label>
        </a-tooltip>
      </template>
    </vxe-grid>

    <edit
      ref="edit"
      v-if="edit.visible"
      :visible.sync="edit.visible"
      :data="dictionary.data"
      :title="edit.title"
      :dictionaryId="edit.dictionaryId"
      :parentId="edit.parentId"
      :parentName="edit.parentName"
      :copy="edit.copy"
      @save="operateStatus"
    ></edit>
  </div>
</template>

<script>
import {
  dictionaryQuery,
  query,
  del,
  isFreeze,
} from "@/services/system/dictionary/list";
import edit from "./edit";

import { selectTableRowRadio, deleteConfirm } from "@/utils/util";
export default {
  components: { edit },
  data() {
    return {
      grid: {
        id: "dictionary",
        loading: true,
        height: this.eipTableHeight(),
        treeConfig: {
          transform: true,
          rowField: "dictionaryId",
          parentField: "parentId",
          reserve: true,
          trigger: "row",
        },
        rowConfig: {
          keyField: "dictionaryId",
        },
        menuConfig: {
          header: {
            options: [
              [
                {
                  code: "exportAll",
                  name: "导出所有.csv",
                  prefixIcon: "vxe-icon-download",
                  visible: true,
                  disabled: false,
                },
              ],
            ],
          },
          body: {
            options: [
              [
                {
                  code: "1",
                  name: "新增",
                  prefixIcon: "vxe-icon-add",
                  visible: true,
                  disabled: false,
                },
                {
                  code: "2",
                  name: "编辑",
                  prefixIcon: "vxe-icon-signature",
                  visible: true,
                  disabled: false,
                },
                {
                  code: "3",
                  name: "删除",
                  prefixIcon: "vxe-icon-delete",
                  visible: true,
                  disabled: false,
                },
              ],
              [
                {
                  code: "print",
                  name: "打印",
                  prefixIcon: "vxe-icon-print",
                  visible: true,
                  disabled: false,
                },
                {
                  code: "export",
                  name: "导出.csv",
                  prefixIcon: "vxe-icon-download",
                  visible: true,
                  disabled: false,
                },
              ],
            ],
          },
          footer: {
            options: [
              [
                {
                  code: "exportAll",
                  name: "导出所有.csv",
                  prefixIcon: "vxe-icon-download",
                  visible: true,
                  disabled: false,
                },
              ],
            ],
          },
        },
        customConfig: {
          mode: "popup",
        },
        filterConfig: {
          remote: true,
        },
        sortConfig: {
          remote: true,
        },
        toolbarConfig: {
          slots: {
            buttons: "toolbar_buttons",
            tools: "toolbar_tools",
          },
        },
        proxyConfig: {
          seq: true, // 启用动态序号代理，每一页的序号会根据当前页数变化
          sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
          filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为
          ajax: {
            query: ({ page, sorts, filters, form }) => {
              return new Promise((resolve) => {
                query({ filters: this.eipTableFilter(filters) }).then(
                  (result) => {
                    if (result.code == this.eipResultCode.success) {
                      resolve(result.data);
                    }
                    this.grid.loading = false;
                  }
                );
              });
            },
          },
        },
        printConfig: {},
        exportConfig: {},
        columns: [
          {
            type: "radio",
            width: 50,
            slots: {
              radio: "radio",
            },
            align: "center",
            fixed: "left",
          },
          { type: "seq", width: 60, fixed: "left" },
          {
            field: "name",
            treeNode: true,
            title: "名称",
            width: 220,
            sortable: true,
            showOverflow: "ellipsis",
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "value",
            title: "值",
            width: 120,
            sortable: true,
            filterRender: { name: "MLFilterRender" },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "color",
            title: "颜色",
            width: 120,
            sortable: true,
            filterRender: { name: "MLFilterRender" },
            slots: {
              default: "color",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "isFreeze",
            title: "禁用",
            width: 120,
            showOverflow: true,
            sortable: true,
            slots: {
              default: "isFreeze",
            },
            filterRender: { name: "MLFilterRender" },
            filters: [
              {
                data: {
                  type: "switch",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [
                    {
                      value: 1,
                      label: "已禁用",
                      checked: false,
                      color: "red",
                    },
                    {
                      value: 0,
                      label: "未禁用",
                      checked: false,
                      color: "#1890ff",
                    },
                  ],
                },
              },
            ],
          },
          {
            field: "orderNo",
            title: "排序",
            sortable: true,
            width: 120,
            filterRender: { name: "MLFilterRender" },
            filters: [
              {
                data: {
                  type: "number",
                  op: "cn",
                  write: null,
                  min: null,
                  max: null,
                },
              },
            ],
          },
          {
            field: "remark",
            title: "备注",
            width: 150,
            sortable: true,
            filterRender: { name: "MLFilterRender" },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "createUserName",
            title: "创建人",
            width: 150,
            sortable: true,
            filterRender: { name: "MLFilterRender" },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "createTime",
            title: "创建时间",
            width: 150,
            sortable: true,
            filterRender: { name: "MLFilterRender" },
            filters: [
              {
                data: {
                  type: "datetime",
                  op: "cn",
                  write: null,
                  min: null,
                  max: null,
                },
              },
            ],
          },
          {
            field: "updateUserName",
            title: "修改人",
            width: 150,
            sortable: true,
            filterRender: { name: "MLFilterRender" },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "updateTime",
            title: "修改时间",
            width: 150,
            sortable: true,
            filterRender: { name: "MLFilterRender" },
            filters: [
              {
                data: {
                  type: "datetime",
                  op: "cn",
                  write: null,
                  min: null,
                  max: null,
                },
              },
            ],
          },
          {
            title: "操作",
            width: 100,
            align: "center",
            fixed: "right",
            slots: {
              default: "operate",
            },
          },
        ],
      },
      key: "",
      dictionary: {
        data: [],
      },
      edit: {
        visible: false,
        dictionaryId: "",
        title: "",
        parentId: "",
        parentName: null,
        copy: false,
      },

      visible: {
        add: false,
        update: false,
        del: false,
        copy: false,
      },
    };
  },

  created() {
    this.dictionaryInit();
  },
  methods: {
    /**
     *
     * @param param0
     */
    cellContextMenuEvent({ row }) {
      const $grid = this.$refs.xGrid;
      $grid.setCurrentRow(row);
    },

    /**
     *
     * @param param0
     */
    contextMenuClickEvent({ menu, row, column }) {
      const $grid = this.$refs.xGrid;
      switch (menu.code) {
        case "1":
          this.dictionaryAdd(row);
          break;
        case "2":
          this.dictionaryUpdate(row);
          break;
        case "3":
          this.dictionaryDel(row);
          break;
        case "print":
          $grid.print();
          break;
        case "export":
          $grid.exportData();
          break;
      }
    },
    /**
     *冻结
     */
    isFreezeChange(row) {
      if (this.visible.update) {
        let that = this;
        isFreeze({ id: row.dictionaryId }).then((result) => {
          that.$message.destroy();
          if (result.code == that.eipResultCode.success) {
            that.tableInit();
            that.$message.success(result.msg);
          } else {
            that.$message.error(result.msg);
          }
        });
      }
    },
    /**
     * 列表数据
     */
    tableInit() {
      this.$refs.xGrid.commitProxy("query");
    },
    /**
     * 菜单树
     */
    dictionaryInit() {
      let that = this;
      dictionaryQuery().then((result) => {
        that.dictionary.data = result.data;
      });
    },
    /**
     * 权限按钮加载完毕
     */
    toolbarOnload(buttons) {
      let addButton = buttons.filter((f) => f.method == "add");
      this.visible.add = addButton.length > 0;

      let updateButton = buttons.filter((f) => f.method == "update");
      this.visible.update = updateButton.length > 0;

      let delButton = buttons.filter((f) => f.method == "del");
      this.visible.del = delButton.length > 0;

      let copyButton = buttons.filter((f) => f.method == "copy");
      this.visible.copy = copyButton.length > 0;
    },

    /**
     * 树新增
     */
    dictionaryAdd(item) {
      this.edit.title = "新增字典";
      this.edit.copy = false;
      this.edit.dictionaryId = undefined;
      this.edit.parentId = item.dictionaryId;
      this.edit.parentName = item.name;
      this.edit.visible = true;
    },

    /**
     * 树更新
     */
    dictionaryUpdate(item) {
      this.edit.copy = false;
      this.edit.dictionaryId = item.dictionaryId;
      this.edit.title = "编辑字典-" + item.name;
      this.edit.visible = true;
    },
    /**
     * 树删除
     */
    dictionaryDel(item) {
      let that = this;
      deleteConfirm(
        "字典【" + item.name + "】" + that.eipMsg.delete,
        function () {
          that.$loading.show({ text: that.eipMsg.delloading });
          del({ id: item.dictionaryId }).then((result) => {
            that.$loading.hide();
            if (result.code == that.eipResultCode.success) {
              that.tableInit();
              that.$message.success(result.msg);
            } else {
              that.$message.error(result.msg);
            }
          });
        },
        that
      );
    },

    /**
     * 树删除
     */
    menuDel(item) {
      let that = this;
      deleteConfirm(
        "模块【" + item.name + "】" + that.eipMsg.delete,
        function () {
          that.$loading.show({ text: that.eipMsg.delloading });
          del({ id: item.menuId }).then((result) => {
            that.$loading.hide();
            if (result.code == that.eipResultCode.success) {
              that.tableInit();
              that.$message.success(result.msg);
            } else {
              that.$message.error(result.msg);
            }
          });
        },
        that
      );
    },
    /**
     * 树更新
     */
    tableUpdateRow(row) {
      this.edit.title = "字典编辑-" + row.name;
      this.edit.visible = true;
      this.edit.dictionaryId = row.dictionaryId;
    },
    /**
     * 删除
     */
    tableDelRow(row) {
      let that = this;
      deleteConfirm(
        "字典【" + row.name + "】" + that.eipMsg.delete,
        function () {
          that.$loading.show({ text: that.eipMsg.delloading });
          del({ id: row.dictionaryId }).then((result) => {
            that.$loading.hide();
            if (result.code == that.eipResultCode.success) {
              that.tableInit();
              that.$message.success(result.msg);
            } else {
              that.$message.error(result.msg);
            }
          });
        },
        that
      );
    },

    /**
     * 新增
     */
    add() {
      this.edit.copy = false;
      this.edit.title = "新增字典";
      this.edit.parentId = undefined;
      this.edit.parentName = "";
      this.edit.dictionaryId = null;
      this.edit.visible = true;
    },

    /**
     * 修改
     */
    update() {
      let that = this;
      selectTableRowRadio(
        that.$refs.xGrid,
        function (row) {
          that.edit.copy = false;
          that.edit.parentId = undefined;
          that.edit.parentName = "";
          that.edit.dictionaryId = row.dictionaryId;
          that.edit.title = "编辑字典-" + row.name;
          that.edit.visible = true;
        },
        that
      );
    },
    /**
     * 复制
     */
    copy() {
      let that = this;
      selectTableRowRadio(
        that.$refs.xGrid,
        function (row) {
          that.edit.copy = true;
          that.edit.parentId = undefined;
          that.edit.parentName = "";
          that.edit.dictionaryId = row.dictionaryId;
          that.edit.title = "复制字典-" + row.name;
          that.edit.visible = true;
        },
        that
      );
    },
    /**
     * 删除
     */
    del() {
      let that = this;
      selectTableRowRadio(
        that.$refs.xGrid,
        function (row) {
          //提示是否删除
          deleteConfirm(
            that.eipMsg.delete,
            function () {
              that.$loading.show({ text: that.eipMsg.delloading });
              del({ id: row.dictionaryId }).then((result) => {
                that.$loading.hide();
                if (result.code == that.eipResultCode.success) {
                  that.tableInit();
                  that.$message.success(result.msg);
                } else {
                  that.$message.error(result.msg);
                }
              });
            },
            that
          );
        },
        that,
        false
      );
    },

    //提示状态信息
    operateStatus(result) {
      if (result.code === this.eipResultCode.success) {
        this.tableInit();
        this.dictionaryInit();
      }
    },
  },
};
</script>
